<template>
	<view class="fullPage p30">
		<view class="container p24 bf border-r1">
			<view class="flex_aj ptb30">
				<view class="flex_aj w230 h230 b-green border-r50p">
					<image src="/static/chongdian.png" mode="widthFix" style="width: 74upx;height: 110upx;"></image>
				</view>
			</view>
			<view class="mb30 plr24 pt10 pb30 bgf5 border-r1">
				<view class="flex_a h70">
					<text class="flex1">充电柜编号：{{ info.deviceSn }}</text>
					<view class="w50 h50" @click="navigation">
						<image src="/static/daohang.png" mode="widthFix" style="width: 50upx;height: 50upx;"></image>
					</view>

				</view>
				<view class="h50">仓门号：{{ info.newCabinetNo }}</view>

				<view class="c6">{{ info.deviceAddress }}</view>
			</view>
			<view class="pt10 bdt">
				<view class="flex_sb h70">
					<text>订单编号：{{ info.orderNo }}</text>
					<text
						:class="info.status == 0 ? 'warning' : info.status == 1 ? 'green' : info.status == 2 ? 'danger' : ''">
						{{
							info.status == 0
								? '进行中'
								: info.status == 1
								? '已完成'
								: info.status == 2
								? '待支付'
								: info.status == 3
								? '已退款'
								: info.status == 4
								? '已取消'
								: '--'
						}}
					</text>
				</view>
				<!-- <view class="h50">
					开始方式：{{ info.payType == 1 ? '微信' : info.payType == 2 ? '余额' : info.payType == 3 ? 'IC卡' : '--' }}
					<text v-if="info.payType == 3">（{{ info.cardNo }}）</text>
				</view> -->
				<view class="h50" v-if="info.cardNo">开始方式：IC卡（{{ info.cardNo }}）</view>
				<view class="h50">开始充电时间：{{ info.stime  }}</view>
				<view class="h50" v-if="info.etime">结束充电时间：{{ info.etime  }}</view>
				<view class="h50" v-if="info.ftime">订单结算时间：{{ info.ftime  }}</view>
				<view class="h50">收费类型：{{ info.mealType == 1 ? '按小时收费' : '按功率收费' }}</view>
				<view class="h50" v-if="info.status != 0">
					{{info.mealType == 1?'充电时长':'实际用量'}}：
					<text v-if="info.mealType == 1">{{ info.chargeTime }}分钟</text>
					<text v-if="info.mealType == 2">{{ info.chargeElect }}度</text>
				</view>
				<view class="h50">
					充电费用：
					<text class="warning">￥{{ info.actuallyPay }}</text>
				</view>

				<!-- 逾期归还 -->
				<view class="" v-if="info.overdueTime > 0">
					<view class="h50">当前占位时长：{{ info.overdueTime }}分钟</view>
					<view class="h50">
						占位费用：
						<text class="warning">￥{{ info.overduePay }}</text>
					</view>
				</view>

				<!-- 待支付 -->
				<view class="h50" v-if="info.status == 2">
					合计：
					<text class="warning">￥{{ info.totalPay }}</text>
				</view>
				<!-- 已完成 -->
				<view class="h50" v-if="info.status == 1">
					支付费用：
					<text class="warning">￥{{ info.totalPay }}</text>
				</view>
			</view>

			<view class="" v-if="info.status == 0 || info.status == 2">
				<view class="mb20 plr60 pt100" v-if="info.status == 0">
					<u-button type="primary" shape="circle" @click="endCharge">结束充电</u-button>
				</view>
				<view class="  pt100 anniu" v-if="info.status == 2">
					<u-button type="primary" shape="circle" @click="WpayAndGet">微信支付取电</u-button>
					<u-button type="primary" shape="circle" @click="payAndGet">余额支付取电</u-button>
				</view>
				<view class="mb20 c9 tac ft24">
					<view class="mb10">电池结束充电后，请在{{ info.occupyTime }}分钟内取出电池！</view>
					<view class="">
						<text>否则将收取{{ info.overduePrice }}元/小时的占用费，详情请看</text>
						<text class="primary"
							@click="routerLink({ path: '/pages/user/chargeEle/protocol' })">《占位扣费说明》</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import WS from '@/utils/socket'
	import {
		orderChargeDetail,
		endCharge,
		payAndGet
	} from '@/api/user.js'
	export default {
		name: 'chargeDetail',
		data() {
			return {
				orderNo: '',
				info: {},
				socketInfo: {}, // socket推送的消息信息
				$ws: null,
				listObj: {},
				secketInfo: {}
			}
		},
		onLoad(e) {
			this.orderNo = e.orderNo
		},
		onShow() {
			this.orderChargeDetail()
			// setTimeout(() => {
			// 	console.log("this.info", this.info)
			// 	if (this.info.id) {
			// 		console.log("this.info22", this.info)
			// 		setTimeout(() => {
			// 			var re = this.getHoursDiff(this.info.etime, this.info.ftime);
			// 			console.log("re----", re)
			// 			// var beyondTime = this.formatSeconds(re)
			// 			console.log("beyondTime---", this.formatSeconds(re))
			// 		}, 0)
			// 	}
			// }, 100)
		},
		onHide() {
			if (this.$ws) {
				this.$ws.close()
			}
		},
		beforeDestroy() {
			if (this.$ws) {
				this.$ws.close()
			}
		},
		methods: {

			async orderChargeDetail() {
				const res = await orderChargeDetail({
					orderNo: this.orderNo
				})
				console.log("res-----", res)
				this.info = res.data
			},
			// 结束充电
			async endCharge() {
				const result = await this.confirm({
					content: '确定结束充电吗？'
				})
				if (!result.confirm) {
					return false
				}
				const res = await endCharge({
					orderNo: this.orderNo
				})
				this.orderChargeDetail()
			},


			// 微信支付
			async WpayAndGet() {
				this.socketInit()
				const res = await payAndGet({
					orderNo: this.orderNo,
					payType: 1,
				})
				this.listObj = res.data || {}
				if (res.code == 200) {
					console.log('578688');
					uni.requestPayment({ // 这一步是调起微信支付
						"appId": this.listObj.appId,
						"timeStamp": this.listObj.timeStamp,
						"nonceStr": this.listObj.nonceStr,
						"package": this.listObj.package,
						"signType": this.listObj.signType,
						"paySign": this.listObj.paySign,
						"success": ((succ) => {
							this.toast('支付成功')
							console.log('succ', succ);
							// this.routerLink({
							// 	path: '/pages/main/map'
							// })
							this.routerLink({
								path: '/pages/user/chargeEle/openDoor',
								query: this.secketInfo
							})


							// this.routerLink({
							// 	path: '/pages/user/chargeEle/openDoor',
							// 	query: this.secketInfo
							// })

							// return uni.showLoading({
							// 	title: '仓门正在开启中，请稍后',
							// 	mask: true
							// })

						}),
						"fail": ((err) => {
							console.log('err', err);
							if (this.info.totalPay == 0) {
								this.toast('支付成功,费用为0');
								// this.routerLink({
								// 	path: '/pages/user/chargeEle/openDoor',
								// 	query: this.secketInfo
								// })
							} else {
								this.$ws.close()
								this.toast('支付失败');
								setTimeout(() => {
									this.orderChargeDetail()
								}, 2200)
							}


						})
					})
				} else {
					this.$ws.close()
					this.toast(res.msg)
					setTimeout(() => {
						this.orderChargeDetail()
					}, 2000)

				}


			},

			// 余额支付
			async payAndGet() {
				this.socketInit()
				const res = await payAndGet({
					orderNo: this.orderNo,
					payType: 2,
				})
				if (res.code == 1001) {
					this.$ws.close()
					this.confirm({
						title: '余额不足',
						content: '当前用户余额不足以支付订单，请先充值',
						confirmText: '前往充值'
					}).then(result => {
						if (result.confirm) {
							this.routerLink({
								path: '/pages/user/wallet/recharge'
							})
						}
					})
				} else if (res.code == 200) {
					return
					uni.showLoading({
						title: '仓门正在开启中，请稍后',
						mask: true
					})
				} else {
					console.log('3333');
					this.$ws.close()
					this.toast(res.msg)
					this.orderChargeDetail()
				}
			},
			// 链接设备
			socketInit() {
				let uri = `gzyh_device_result_` + this.orderNo
				this.secketInfo['orderNo'] = this.orderNo
				this.secketInfo['cabinets'] = this.info.newCabinetNo
				console.log('进来了设备链接', this.secketInfo);
				this.$ws = new WS(uri)
				this.$ws.onNotify(uri, res => {
					console.log('进来了设备链接!!!!!!!!!!!', uri, res.data)
					if (res.code == 200) {
						uni.hideLoading()
						this.secketInfo = res.data
						this.routerLink({
							path: '/pages/user/chargeEle/openDoor',
							query: res.data
						})
					}
				})
			},
			navigation() {
				// 因后端传过来的经纬度是百度的，所以要经过转化成腾讯经纬度
				// let lng = this.info.lng
				// let lat = this.info.lat
				// let pi = (3.14159265358979324 * 3000.0) / 180.0;
				// let x = lng - 0.0065;
				// let y = lat - 0.006;
				// let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
				// let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
				// lng = z * Math.cos(theta);
				// lat = z * Math.sin(theta);
				uni.getLocation({
					type: 'gcj02', //返回可以用于 uni.openLocation 的经纬度
					success: (res) => {
						uni.openLocation({
							scale: 18,
							latitude: this.info.lat * 1,
							longitude: this.info.lng * 1,
							// name: this.info.title,
							// address: this.info.address,
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.anniu {
		display: flex;
		justify-content: space-between;
		padding-left: 15rpx;
		padding-right: 15rpx;
		margin-bottom: 25rpx;
	}
</style>